<script setup lang="ts">
import { getBody, orgApi, userApi } from '@/api/Api';
import CoverPage from '@/components/CoverPage.vue';
import InputTree from '@/components/InputTree.vue';
import { type Tree, type User } from '@/entity/FrontendStruct';
import { onMounted, reactive, ref } from 'vue';
import { regexApi } from '@/api/RegexApi'
import { ruleUtils } from '@/api/elementUtils';
const data = ref<User[]>();
const pageSize = ref(10);
const currentPage = ref(1);
const searchValue = ref<string>();
const converShow = ref<boolean>(false);
const orgs = ref<Array<Tree>>([]);
const selectOrg = ref<Array<Tree>>([]);
const formCheck = ref<string[]>([]);
const ruleFormRef = ref()
// 添加用户信息
const user = reactive<User>({
  username: "",
  name: "",
  phone: "",
  org: [],
  password: "",
  email: ""
});

// 表单校验
const rules = new ruleUtils().setChecks([
  { name: 'username', required: true, message: '字母或数组6到32位', cb: () => regexApi.usernameRegex.test(user.username) },
  { name: 'phone', required: true, message: '手机号码不正确', cb: () => regexApi.phoneRegex.test(user.phone) },
  { name: 'email', required: true, message: '格式不正确', cb: () => regexApi.emailRegex.test(user.email) },
  { name: 'password', required: true, message: '数组字母或符号', cb: () => regexApi.passwordRegex.test(user.password) },
  { name: 'confirmPassword', required: true, message: '密码不一致', cb: () => user.password == user.confirmPassword },
]
)

function changePage(tree: Tree) {
  console.log("切换分组: " + JSON.stringify(tree))
  currentPage.value = 1;
  getUser({"page": currentPage.value, 'org': tree.id == -1 ? '' : tree.id });
}

function getUser(param: {[key:string]: any}) {
  let body = getBody().setObj(param).toFormData();
  userApi.getUser({
    success: (result: User[]) => {
      data.value = result;
    }, fail: (data: any) => {
      console.log(data)
    }, body: body
  })
}

function getOrg() {
  orgApi.getOrg({
    success: (result: Array<Tree>) => {
      orgs.value = result;
    },
    fail: (data: any) => {
      console.log(data)
    }
  })
}

function userAdd() {
  if (rules.check()) {
    user.org = orgs.value.map(f => f.id);
    userApi.userAdd({
      success: (result: any) => { },
      fail: (err: any) => {
        alert("创建用户失败")
      },
      body: getBody().setObj(user).toFormData()
    });
  }
}


onMounted(() => {
  getUser({"page": currentPage.value});
})
defineExpose({
  changePage
})

</script>

<template>
  <div style="height: 55px; background-color: rgb(157 157 157 / 6%)">
    <el-button style="margin-top: 12px" @click="converShow = true; getOrg()"> 添加用户 </el-button>
    <el-button style="margin-top: 12px"> 批量删除 </el-button>
    <div style="width: 310px;  height: 100%; float: right;border-radius: 10px;">
      <el-input v-model="searchValue" style="width: 240px; margin-top: 12px" placeholder="搜索" />
      <el-button style="margin-top: 12px"> 搜索 </el-button>
    </div>
  </div>
  <div style="height: calc( 100% - 110px )">
    <el-table :data="data" style="width: 100% ; " height="100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="名字" width="160" align="center" />
      <el-table-column prop="username" label="账号" width="160" align="center" />
      <el-table-column prop="email" label="邮箱" width="260" align="center" />
      <el-table-column prop="phone" label="手机号" width="120" align="center" />
      <el-table-column prop="org" label="组织单位" width="260" align="center" />
      <el-table-column prop="date_joined" label="注册时间" width="230" align="center" />
      <el-table-column prop="last_login" label="上次登录时间" width="230" align="center" />
      <el-table-column fixed="right" label="授权" width="60" align="center">
        <template #default>
          <el-button link type="primary">
            授权
          </el-button>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="110" align="center">
        <template #default>
          <el-button link type="primary">
            编辑
          </el-button>
          <el-button link type="primary">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 页码 -->
  <div class="demo-pagination-block" style="float: right;   margin-top: 15px;margin-right: 25px;">
    <div class="demonstration" style="float: left; margin-right: 15px;margin-top: 5px;">第1页</div>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
      :page-sizes="[10, 50, 100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="400"
      @size-change="(value: number) => { pageSize = value }"
      @current-change="(value: any) => { currentPage = value }" />
  </div>
  <!-- 弹出框 -->
  <CoverPage lefe-button="创建" right-button="取消" :show="converShow" title="添加用户" @on-close="converShow =
    !converShow" @on-complate="userAdd()" style="min-width: 450px; max-width: 600px">

    <el-form ref="ruleFormRef" style="max-width: 600px" status-icon label-width="auto" class="demo-ruleForm"
      scroll-to-error :rules="rules.getRules()">
      <el-form-item label="姓名" prop="name" class="form-item">
        <el-input v-model="user.name" />
      </el-form-item>
      <el-form-item label="账号" prop="username" class="form-item">
        <el-input v-model="user.username" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone" class="form-item">
        <el-input v-model="user.phone" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email" class="form-item">
        <el-input v-model="user.email" />
      </el-form-item>
      <InputTree label="部门" prop="org" v-if="converShow" v-model="selectOrg" :data="orgs" />
      <el-form-item label="密码" prop="password" class="form-item">
        <el-input v-model="user.password" type="password" />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword" class="form-item">
        <el-input v-model="user.confirmPassword" type="password" />
      </el-form-item>
    </el-form>

  </CoverPage>

</template>

<style lang="css" scoped>
.form-item {
  margin-bottom: 9px;
  width: 280px !important;
  /*固定大小防止校验时被溢出导致所有输入框调整*/
}

:deep(.el-form-item__error) {
  position: absolute;
  left: -160px;
  top: 6px;
}
</style>
